<template>
  <!--  -->
  <div ref="tagcanvasbox" class="tagcanvasbox">
    <!-- <canvas
      ref="tagcanvas"
      width="844"
      height="475"
      @mousedown="mouseDown($event)" //鼠标指针移动到元素上方,并按下鼠标左键时
      @mouseup="mouseUp($event)"  //松开鼠标左键时
      @mousemove="mouseMove($event)" //鼠标指针在指定的元素中移动时
      @contextmenu.prevent="contextMenu($event)"
      @mouseout="mouseOut($event)"  //鼠标指针从元素上移开时
    ></canvas> -->

    <canvas
      ref="tagcanvas"
      width="844"
      height="475"
      @mousedown="mouseDown($event)"
      @mouseup="mouseUp($event)"
      @mousemove="mouseMove($event)"
      @contextmenu.prevent="contextMenu($event)"
    ></canvas>
  </div>
</template>

<script>
export default {
  //   name: "canvas",
  //props:{imgCanvas:{type:Object,default:{imgcanvasW:844,imgcanvasH:475}},},
  data() {
    return {
      //线段的点的集合
      points: [],
      //可拖动圆圈的点的集合
      circles: [],

      isDragging: false,

      ctx: "",
      x: 0,
      y: 0,
      radius: 5,
      color: "blue",
      isSelected: false,

      index:0,
    };
  },
  mounted() {
    this.ctx = this.$refs.tagcanvas.getContext("2d");
  },
  methods: {
    mouseOut(e) {
      //   let dom = this.$refs.tagcanvas;
      //   let x = e.clientX;
      //   let y = e.clientY;
      //   let domx1 = dom.offsetLeft;
      //   let domy1 = dom.offsetTop;
      //   let domx2 = dom.offsetLeft + dom.offsetWidth;
      //   let domy2 = dom.offsetTop + dom.offsetHeight;
      //   if (x < domx1 || x > domx2 || y < domy1 || y > domy2) {
      //     this.clearCanvas(this.$refs.tagcanvas, this.ctx);
      //     this.drawOldRecs(this.tagObj.recs, this.ctx);
      //   }
      this.isDragging = false;
    },
    mouseDown(e) {
        debugger;
      let dom = this.$refs.tagcanvas;

      //   var clickX = e.pageX - dom.offsetLeft;
      //   var clickY = e.pageY - dom.offsetTop;
      var clickX = e.offsetX - dom.offsetLeft;
      var clickY = e.offsetY - dom.offsetTop;

      if (e.button == 2) {
        // if (this.tagObj.index >= 0) {
        //   this.tagObj.isRightClick = true;
        // }
        return;
      }

      //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
      for (var i = 1; i < this.circles.length; i++) {
        var circle = this.circles[i];
        //使用勾股定理计算这个点与圆心之间的距离
        var distanceFromCenter = Math.sqrt(
          Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
        );

        // 如果是其他的点，则设置可以拖动
        if (distanceFromCenter <= circle.radius) {
          // 清除之前选择的圆圈
          this.index = i;
          this.isDragging = true;
          //停止搜索
          return;
        }
      }
      //如果点击新的位置，则进入下面的代码，绘制点
      this.ctx.clearRect(0, 0, dom.width, dom.height);
      //遍历数组画圆
      var circle = new this.Circle(clickX, clickY);
      this.circles.push(circle);
      this.circles[0].color = "green";
      for (var i = 0; i < this.circles.length; i++) {
        var circle = this.circles[i];
        // 绘制圆圈
        this.ctx.globalAlpha = 0.85;
        this.ctx.beginPath();
        this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = circle.color;
        this.ctx.strokeStyle = "black";
        this.ctx.fill();
        this.ctx.stroke();
      }
      // 画线
      var point = this.Point(clickX, clickY);
      this.points.push(point);
      this.ctx.beginPath();
      this.ctx.lineWidth = 4;
      //从起始点开始绘制
      this.ctx.moveTo(this.points[0].x, this.points[0].y);
      for (var i = 0; i < this.points.length; i++) {
        this.ctx.lineTo(this.points[i].x, this.points[i].y);
      }
      this.ctx.fillStyle = "rgb(2,100,30)";
      this.ctx.fill();
      this.ctx.strokeStyle = "#9d4dca";
      this.ctx.stroke();
    },
    mouseUp(e) {
      this.isDragging = false;
    },
    mouseMove(e) {
      let dom = this.$refs.tagcanvas;

      // 判断圆圈是否开始拖拽
      if (this.isDragging == true) {
        // 判断拖拽对象是否存在
        // 取得鼠标位置
        var x1 = e.offsetX - dom.offsetLeft;
        var y1 = e.offsetY - dom.offsetTop;
        this.ctx.clearRect(0, 0, dom.width, dom.height);
        //根据上文得到的index设置index点位置随鼠标改变
        this.circles[this.index].x = x1;
        this.circles[this.index].y = y1;
        this.points[this.index].x = x1;
        this.points[this.index].y = y1;
        for (var i = 0; i < this.circles.length; i++) {
          var circle = this.circles[i];
          // 绘制圆圈
          this.ctx.globalAlpha = 0.85;
          this.ctx.beginPath();
          this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
          this.ctx.fillStyle = circle.color;
          this.ctx.strokeStyle = "black";
          this.ctx.fill();
          this.ctx.stroke();
        }
        this.ctx.beginPath();
        this.ctx.moveTo(this.points[0].x, this.points[0].y);
        for (var i = 0; i < this.points.length; i++) {
          this.ctx.lineTo(this.points[i].x, this.points[i].y);
        }
        this.ctx.lineTo(this.points[0].x, this.points[0].y);
        // context.fillStyle="#831f68";
        this.ctx.fillStyle = "rgb(2,100,30)";
        this.ctx.fill();
        this.ctx.strokeStyle = "#9d4dca";
        this.ctx.stroke();
      }
    },
    contextMenu(e) {
      window.console.log(e);
      return false;
    },

    Point(x, y) {
      return {
        x: x,
        y: y,
      };
    },
    Circle(x, y) {
      return {
        x: x,
        y: y,
        radius: "2",
        color: "blue",
        isSelected: false,
      }; 
    },
 

  },
};
</script>
<style scoped>
.tagcanvasbox {
  width: 600px;
  height: 500px;
  position: relative;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

